﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Autocomplete 测试 </title>

    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="../Scripts/typeahead.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function () {

            // 单一数据来源.
            $("#txtQuery").typeahead({
                name: 'city',
                prefetch: 'city.json',
                limit: 10
            });

            // 多个数据来源.
            $("#txtQueryDistrict").typeahead([
                {
                    name: 'beijing-district',
                    prefetch: 'beijing.json',
                    header: '<h3 class="city-name">北京市</h3>'
                },
                {
                    name: 'shanghai-district',
                    prefetch: 'shanghai.json',
                    header: '<h3 class="city-name">上海市</h3>'
                },
                {
                    name: 'guangzhou-district',
                    prefetch: 'guangzhou.json',
                    header: '<h3 class="city-name">广州市</h3>'
                }
            ]);



            // 动态数据来源.
            $("#txtQuery2").typeahead({
                name: 'city2',
                remote: 'JsonSearch.ashx?q=%QUERY',
                limit: 10
            });

        });

    </script>



<style type="text/css">

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

</style>



</head>



<body>


从  http://plugins.jquery.com/typeahead.js/  下载



<h3>  测试单一数据来源  </h3>

    <input id="txtQuery" type="text"  style="width:500px" placeholder="请输入一个城市 " />



<h3>  测试多个数据来源  </h3>

    <input id="txtQueryDistrict" type="text"  style="width:500px" placeholder="请输入一个区的名字 （例如 “东”或者“黄”） " />



<h3>  测试 动态查询  (这里输入 拼音缩写，例如 bj  sh  sz) </h3>

    <input id="txtQuery2" type="text"  style="width:500px" placeholder="请输入一个城市 " />



</body>
</html>
